{% extends 'users/base-layer.html' %}
{% load staticfiles %}

{% block main %}
<style>
    ul.parsley-errors-list {
        list-style-type: none;
        color: red;
        padding-left: 0;
        margin-bottom: 0;
    }
</style>

    <div class="box box-danger no-shadow">
        <form class="form-horizontal" id="addForm" method="post">
            {% csrf_token %}
            <input type="hidden" name='user' value="{{ request.user.id }}"/>
            <div class="box-body">
                <fieldset>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="start_time">开始时间</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control pull-right form_datetime" name="start_time"
                                   id="start_time" readonly required>
                        </div>
                        <label class="col-sm-2 control-label" for="end_time">结束时间</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control pull-right form_datetime" name="end_time"
                                   id="end_time" readonly required/>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="title">任务标题</label>
                        <div class="col-sm-3" style="width: 48%">
                            <input type="text" class="form-control pull-right" name="title" id="title" required maxlength="32">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="content">计划内容</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" name="content" id="content" rows="5" required></textarea>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" for="multiple">添加关注</label>
                        <div class="col-sm-3" style="width: 48%">
                            <select class="form-control select2" multiple="multiple" name="attention" id="multiple"
                                    data-placeholder="添加关注"
                                    style="width: 100%;">
                                {% for attention in users %}
                                    <option value="{{ attention.id }}">{{ attention.username }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <span><small class="text-danger margin-l-5">* 关注人可以查看本条内容</small></span>
                    </div>
                </fieldset>
            </div>
            <div class="box-footer no-border">

                <div class="row span7 text-center ">
                    <button type="button" id="btnCancel" class="btn btn-default margin-right ">重置</button>
                    <button type="button" id="btnSave" class="btn btn-info margin-right ">保存</button>
                </div>
            </div>

        </form>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{% static 'parsley/dist/parsley.min.js' %}"></script>
    <script src="{% static 'parsley/dist/zh_cn.js' %}"></script>
    <script type="text/javascript">
        $("#btnSave").click(function () {
            let obj = $("#addForm")
            let data = obj.serialize();
            let status = obj.parsley().validate();
            if (status) {
                $.ajax({
                    type: 'POST',
                    url: "{% url 'create_plan' %}",
                    data: data,
                    traditional: true,
                    dataType: 'json',
                    cache: false,
                    success: function (res) {
                        if (res.result) {
                            layer.alert(res.msg, {icon: 1}, function () {
                                parent.location.reload();
                            });
                        } else {
                            layer.alert(res.msg, {icon: 5});
                            //$('errorMessage').html(msg.message)
                        }
                    }
                });
            }
        });


        /*点取消刷新新页面*/
        $("#btnCancel").click(function () {
            window.location.reload();

        });
    </script>

{% endblock %}
